<!--治具单个详情modal-->
<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    centered
    @ok="handleOk"
    @cancel="handleCancel"
    okText="确定"
    cancelText="取消"
  >
    <a-spin :spinning="confirmLoading">
      <a-row>
        <section ref="print" id="printContent">
          <!-- <table style="border-collapse: collapse; width: 100%; height: 147px;" border="1">
            <tbody>
              <tr style="height: 21px;">
                <td style="height: 21px; width: 49.8089%;text-align: center" colspan="3">
                  <img src="../../../assets/long_logo_small.png" height="43" width="220" />
                </td>
                <td style="width: 33.3758%;text-align: center" colspan="2">
                  {{ fixtureToolModel.fixtureCode }}
                </td>
                <td style="width: 16.2699%; height: 63px; text-align: center" rowspan="3">
                  <div id="qrcode" ref="qrcode"></div>
                  {{ fixtureToolModel.materialCode }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  名称
                </td>
                <td style="width: 66.6242%; height: 21px;text-align: center" colspan="4">
                  {{ fixtureToolModel.name }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  电压
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  &nbsp;
                </td>
                <td style="width: 16.5605%; height: 21px;">
                  功率
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  &nbsp;
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  {{ fixtureToolModel.materialCode }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  调试验收
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  &nbsp;
                </td>
                <td style="width: 16.5605%; height: 21px;">
                  品质验收
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  &nbsp;
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  制作日期
                </td>
                <td style="width: 16.2699%; height: 21px;">
                  &nbsp;
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  工装版本
                </td>
                <td style="width: 16.6879%; height: 21px ;text-align: center" colspan="5">
                  {{ materialInfo.fixtureVer }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  产品版本
                </td>
                <td style="width: 16.6879%; height: 21px;text-align: center" colspan="5">
                  {{ materialInfo.prodVer }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  适用机型
                </td>
                <td style="width: 16.6879%; height: 21px;text-align: center" colspan="5">
                  {{ materialInfo.applicableModel }}
                </td>
              </tr>
            </tbody>
          </table> -->
          <table style="border-collapse: collapse; width: 100%; height: 147px;" border="1">
            <tbody>
              <tr style="height: 21px;">
                <td style="height: 21px; width: 49.8089%;text-align: center; padding-left: unset;" colspan="3">
                  <img src="../../../assets/long_logo_small.png" height="43" width="220" />
                </td>
                <td style="width: 33.3758%;text-align: center" colspan="2">
                  {{ fixtureToolModel.fixtureCode }}
                </td>
                <td style="width: 16.2699%; height: 63px; text-align: center; padding-left: unset;" rowspan="3">
                  <div id="qrcode" ref="qrcode"></div>
                  {{ fixtureToolModel.materialCode }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  名称
                </td>
                <td style="width: 66.6242%; height: 21px;text-align: center" colspan="4">
                  {{ fixtureToolModel.name }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  电压
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  {{ materialInfo.voltage }}
                </td>
                <td style="width: 16.5605%; height: 21px;">
                  功率
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  {{ materialInfo.power }}
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  {{ fixtureToolModel.materialCode }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  调试验收
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  {{ fixtureToolModel.debugUser }}
                </td>
                <td style="width: 16.5605%; height: 21px;">
                  品质验收
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  {{ fixtureToolModel.qualityUser }}
                </td>
                <td style="width: 16.6879%; height: 21px;">
                  制作日期
                </td>
                <td style="width: 16.2699%; height: 21px;">
                  {{
                    fixtureToolModel.manufactureDate ? fixtureToolModel.manufactureDate.toString().split(' ')[0] : ''
                  }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  工装版本
                </td>
                <td style="width: 16.6879%; height: 21px ;text-align: center" colspan="5">
                  {{ materialInfo.fixtureVer }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  产品版本
                </td>
                <td style="width: 16.6879%; height: 21px;text-align: center" colspan="5">
                  {{ materialInfo.prodVer }}
                </td>
              </tr>
              <tr style="height: 21px;">
                <td style="width: 16.5605%; height: 21px;">
                  适用机型
                </td>
                <td style="width: 16.6879%; height: 21px;text-align: center" colspan="5">
                  {{ materialInfo.applicableModel }}
                </td>
              </tr>
            </tbody>
          </table>
        </section>
      </a-row>
      <a-divider orientation="left">
        制作状态
      </a-divider>
      <a-row>
        <a-steps :current="fixtureToolModel.fixtureStatus">
          <a-step title="生成标签" description="打印标签" />
          <a-step title="制作" description="工装制作">
            <a-icon v-if="fixtureToolModel.fixtureStatus == 1" slot="icon" type="loading" />
          </a-step>
          <a-step title="调试" description="调试中">
            <a-icon v-if="fixtureToolModel.fixtureStatus == 2" slot="icon" type="loading" />
          </a-step>
          <a-step title="验收" description="验收中">
            <a-icon v-if="fixtureToolModel.fixtureStatus == 3" slot="icon" type="loading" />
          </a-step>
          <a-step title="入库" description="入库">
            <a-icon v-if="fixtureToolModel.fixtureStatus == 4" slot="icon" type="loading" />
          </a-step>
        </a-steps>
      </a-row>
      <br />
      <a-row>
        <a-button block v-print="'#printContent'" @click="removeCanvasQrcode()" type="primary">打印标签</a-button>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { getMCInfoByIdOrCode } from '@api/api'
import QRCode from 'qrcodejs2'
export default {
  name: 'FixtureToolModal',
  data() {
    return {
      title: '治具标签详细信息',
      visible: false,
      confirmLoading: false,
      cardloading: false,
      //原始的治具信息记录
      fixtureToolModel: {},
      //治具绑定的物料信息
      materialInfo: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
  },

  methods: {
    open(record) {
      console.log('详情', record)
      this.fixtureToolModel = Object.assign({}, record)
      this.visible = true
      this.cardloading = true

      //初始化明细数据,如物料详细信息等
      getMCInfoByIdOrCode({ mcInfoId: this.fixtureToolModel.materialInfoId }).then(res => {
        if (res.success) {
          this.cardloading = false
          this.materialInfo = Object.assign({}, res.result)
          console.log(this.materialInfo)
          //生成二维码
          this.$refs.qrcode.innerHTML = '' //先清除二维码方法一
          // if(Object.keys(this.qr_code).length==0){
          new QRCode('qrcode', {
            width: 100,
            height: 100,
            text: this.materialInfo.materialCode + ',' + this.fixtureToolModel.fixtureCode, // 二维码地址
            render: 'canvas',
            colorDark: '#000',
            colorLight: '#fff'
          })
          // }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.visible = false
    },
    removeCanvasQrcode() {
      //删除这个canvas绘制的二维码,这个qrcodejs2的bug会生成两个二维码,一个canvas,一个img,打印时两个都会展示出来,只保留img的
      let qr_code_canva = document.getElementsByTagName('canvas')[0]
      qr_code_canva.remove()
    }
  },
  created() {}
}
</script>

<style scoped>
td {
  padding-left: 10px;
}
#qrcode {
  display: inline-block;
  margin: 0px auto;
}
</style>
